<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wallpaper Viewer</title>
    <style>
        body {
        font-family: 'Roboto', sans-serif;
        background: rgba(0, 0, 0, 0.1);
        overflow-x: hidden;
        }

        .wrapper {
        position: absolute;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -moz-flex;
        display: flex;
        box-align: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        -ms-flex-align: center;
        align-content: flex-start;
        -ms-flex-line-pack: start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        box-lines: multiple;
        flex-wrap: wrap;
        height: 100%;
        width: 100%;
        padding: 30px;
        }

        .widget {
        width: 100%;
        max-width: 430px;
        height: 400px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        background-color: #fff;
        overflow: hidden;
        position: relative;
        margin: 0 30px 30px 0;
        }

        .widget_photo {
        width: 100%;
        height: 300px;
        position: relative;
        }

        .widget_details {
        padding: 30px;
        position: relative;
        }

        .widget_name {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 600;
        width: 100%;
        padding: 0 80px 0 0;
        }

        .widget_type {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.6);
        }
        .butn {
        border-radius: 4px 4px 4px 4px;
        border: 4px solid transparent;
        color: #fff;
        cursor: pointer;
        }
        .butn-primary {
        background: dodgerblue;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="wrapper"></div>
    <script>
        const request = require('request');
        const remote = require('electron').remote;
        const fs = require('fs');
        window.jquery = window.$ = require('jquery');
        var page = 1;
        load();
        const userDataPath = (remote.app).getPath('userData');
        console.log(userDataPath);
        function load() {
            request('https://pixabay.com/api?key=8734742-434607e3b811deadd84c5d69e&per_page=60&page=' + page, (r,s,b) => {
                var results = JSON.parse(b);
                console.log(results.hits);
                $.each(results.hits, (i) => {
                    $('.wrapper').append('<div class="widget">'+
                    '<img class="widget_photo" src="'+results.hits[i].webformatURL+'">'+
                    '<div class="widget_details">'+
                    '<div class="widget_name">'+results.hits[i].tags+'</div><div class="widget_type">'+ results.hits[i].user + '</div><a data-id="'+results.hits[i].largeImageURL+'" class="butn butn-primary right" onclick="setWallpaper(this)">Set Wallpaper</a></div></div>');
                });
            });
        }
        window.onscroll = function()
        {
            var scrollHeight, totalHeight;
            scrollHeight = document.body.scrollHeight;
            totalHeight = window.scrollY + window.innerHeight;

            if(totalHeight >= scrollHeight)
            {
                page+=1;
                load();
            }
        }

        function setWallpaper(e) {
            console.log($(e).attr('data-id'));
            const wallpaper = require('wallpaper');
            const download = require('images-downloader').images;
            const dest = userDataPath + '/wallpapers';
            var images = [$(e).attr('data-id')];
            download(images, dest)
            .then(result => {
                console.log('Images downloaded', result);
                wallpaper.set(result[0].filename).then(() => {
                    console.log(result[0].filename);
                });	
            })
            .catch(error => console.log("downloaded error", error))
        }
    </script>
</body>
</html>